<div class="fui-input-group">
  <svg
    class="fui-input-addon"
    *ngIf="prefix"
    [fuiIcon]="prefix"
    color="secondary"
    [ngClass]="{'fui-input-invalid-icon': shouldValidate && (invalid | async)}"
  ></svg>
  <input
    [type]="type"
    placeholder="{{parsedPlaceholder | translate}}"
    [(ngModel)]="value"
    [ngClass]="{'fui-input-invalid': shouldValidate && (invalid | async)}"
    [disabled]="disabled"
    [readonly]="readonly"
    (blur)="blur.emit($event)"
  >
  <svg
    class="fui-input-addon"
    *ngIf="suffix"
    (click) = "toggleShow()"
    [fuiIcon]="suffix"
    color="secondary"
    [ngClass]="{'fui-input-invalid-icon': shouldValidate && (invalid | async)}"
  ></svg>
</div>
<fui-form-error
  *ngIf="shouldValidate && (invalid | async)"
  [validationResults]="failures | async"
  [errorMsgs]="errorMsgs"
>
</fui-form-error>
